<template>
    <div>
        <div style="margin-bottom: 5px">
            <Button @click="btn_add_bug"  style="margin-right: 5px">创建bug</Button>
            <Button @click="btn_refresh">刷新</Button> 
        </div>
        <!-- 列表区域 -->
        <i-table border stripe  :columns="format" :data="show_list" height="720">
            <template slot-scope="{ row, index }" slot="action">
                <Button type="primary" style="margin-bottom: 5px;margin-right:5px;"  @click="btn_edit_bug(index)">编辑</Button>
            </template>
        </i-table >
        <div style="text-align: center;margin-top: 10px;">
            <Page ref="page" :total="total" :page-size="pageSize"  @on-change="changePage" show-total/>
        </div>
        <!-- 创建bug模态框 -->
        <Modal v-model="show_add_bug_modal" draggable  width="800">
            <p slot="header" style="color:#f60;text-align:center">
                {{bug.service}}<span>添加bug</span>
            </p>
            <div >
                <Form ref="bug" :model="bug" :rules="bug_rules" label-position="left"  :label-width="100">
                   <Form-Item label="选择项目" prop="project">
                        <Select v-model="bug.project" @on-change="project_change">
                            <Option v-for="project in project_list" :key="project" :value="project">{{ project }}</Option>
                        </Select>
                    </Form-Item> 
                    <FormItem label="选择服务" prop="service_list">
                        <CheckboxGroup v-model="bug.service_list">
                            <Checkbox  v-for="service in service_list" :label="service" :key="service" :value="service">{{service}}</Checkbox>
                        </CheckboxGroup>
                    </FormItem>
                    <p style="margin:0 0 20px 100px;">已选:{{ bug.service_list.join(',') }}</p>
                    <Form-Item label="选择环境" prop="env">
                        <Select v-model="bug.env">
                            <Option v-for="env in env_list" :key="env" :value="env">{{ env }}</Option>
                        </Select>
                    </Form-Item> 
                    <Form-Item>
                        <Input  v-model="bug.name" placeholder="输入bug名称"/>
                    </Form-Item>
                </Form> 
            </div>
            <div slot="footer">
                <Button type="primary" size="large"  @click="submit_add_bug('bug')">提交</Button>
            </div>
        </Modal>
        <!-- 编辑bug模态框 -->
        <Modal v-model="show_edit_bug_modal" draggable  width="1000">
            <p slot="header" style="color:#f60;text-align:center">
               <span>编辑站点</span>
            </p>
            <div >
                <Form ref="bug_edit" :model="bug_edit" :rules="bug_rules" label-position="left"  :label-width="100" inline>
                    <Form-Item label="项目" prop="project">
                        <Input v-model="bug_edit.project" style="width:150px"  disabled />
                    </Form-Item> 
                    <Form-Item label="选择环境" prop="env">
                        <Select v-model="bug_edit.env" style="width:100px" >
                            <template v-for="env in env_list" >
                                <Option  :key="env" :value="env" v-if="env === bug_edit.env"  selected>{{ env }}</Option>
                                <Option :key="env" :value="env" v-else>{{ env }} </Option>
                            </template>
                         </Select>
                    </Form-Item> 
                    <Form-Item label="状态"  prop="status">
                        <Select v-model="bug_edit.status"  style="width:100px" >
                            <template v-for="status in status_list" >
                                <Option :key="status" :value="status" v-if="status === bug_edit.status"  selected>{{ status }}</Option>
                                <Option :key="status" :value="status" v-else>{{ status }} </Option>
                            </template>
                        </Select>
                    </Form-Item>

                    <FormItem label="选择服务" prop="service_list">
                        <CheckboxGroup v-model="bug_edit.service_list">
                            <template v-for="service in service_list" >
                                <Checkbox  :label="service" :key="service" :value="service" v-if="service in bug_edit.service_list" checked>{{service}}</Checkbox>
                                <Checkbox :label="service" :key="service" :value="service" v-else>{{service}}</Checkbox>
                            </template>
                        </CheckboxGroup>
                    </FormItem>
                    <p style="margin:0 0 20px 100px;">已选: {{ bug_edit.service_list.join(',') }}</p>

                    <Form-Item label="bug名字" prop="name">
                        <Input  v-model="bug_edit.name" style="width:800px" />
                    </Form-Item>
                    <Form-Item label="bug内容:" prop="content">
                        <MyEditor  ref='myEditor' v-model="bug_edit.content"   :defaultContent="bug_edit.content" style="height:450px; width: 800px"></MyEditor>
                    </Form-Item>
                </Form> 
            </div>
            <div slot="footer">
                <Button type="primary" size="large"  @click="submit_edit_bug('bug_edit')">提交</Button>
            </div>
        </Modal>
    </div>
</template>

<script>

import { 
    bug_add,
    bug_list,
    bug_update,
    get_project_name_list,
    get_service_by_project,
    get_env_by_project,
} from '@/api';

import { post } from '@/api/http'
import { show_simple_page } from '@/common/util'
import MyEditor from '@/lib/editor/myEditor';

export default {
    components:{
        MyEditor
    },
    data() {
        return {
            format: [
                {
                    title: '项目',key: 'project'
                },
                {
                    title: '服务/模块',key: 'service_list',                    
                    render: (h,params) => {
                        return h('div',[
                            h('p',params.row.service_list.join(','))
                        ])
                    }
                },
                {
                    title: '环境',key: 'env',
                },
                {
                    title: 'bug名称',key: 'name',
                },
                {
                    title: 'bug内容',key: 'content',tooltip: true,ellipsis: true,
                },
                {
                    title: '创建用户',key: 'create_user'
                },
                {
                    title: '处理用户',key: 'deal_user'
                },
                {
                    title: '状态',key: 'status'
                },
                {
                    title: '创建时间',key: 'create_time'
                },
                {
                    title: '操作',slot: 'action',width: 200,align: 'center'
                }
            ],
            // 新增站点绑定
            bug: {
                project: '',
                service_list: [],  //checkgroup 要求这里是数组
                env: '',
                name: '',
            },
            // 项目列表
            project_list: [],
            // 服务列表
            service_list: [],
            // 环境列表
            env_list: [],
            bug_rules: {
                project:[
                    {required: true,message:"请选择好项目",trigger: 'blur'},
                ],
            },
            show_add_bug_modal: false,
            // 编辑数据
            bug_edit: {
                project: '',
                service_list: [],
                env: '',
                name: '',
                content: '',
                status:'',
            },
            status_list:['创建','开发处理','测试','已上线','已修复'],
            
            show_edit_bug_modal:false,
            // 编辑数据
            show_list: [],
            // 分页
            total: 0,
            pageSize: 15,
        }
    },
    methods: {
        btn_refresh(){
            this.refresh()
        },
        // 提交修改事件
        submit_edit_bug(name){
            console.log(name)
            let data = {'bug':this.bug_edit}
            post(bug_update,data).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('更新成功')
                    this.show_edit_bug_modal = false
                    this.refresh()
                }else {
                    alert("更新失败:",info)
                }
            })
        },
        // 编辑bug事项事件
        btn_edit_bug(index){
            let bug =  JSON.parse(JSON.stringify(this.show_list[index]))
            this.bug_edit = bug
            this.get_project()
            let project_name = this.bug_edit.project
            this.get_service(project_name)
            this.get_env(project_name)
            
            setTimeout(() =>{
                this.show_edit_bug_modal=true
            },200); 
            
        },
        // 获取项目列表
        get_project(){
            post(get_project_name_list).then(response=>{
                this.project_list = response.data
            })
        },
        // 项目选择事件
        project_change(){
            // 先重置 环境和服务(当项目没有服务时，有bug，换项目，服务项没有重置)
            this.bug.service = ''
            this.bug.env = ''
            let project_name = this.bug.project
            
            this.get_service(project_name)
            this.get_env(project_name)
        },

        // 根据项目获取服务
        get_service(project_name){
            let data = {"project_name": project_name}
            post(get_service_by_project,data).then(response=>{
                this.service_list = response.data
            })
        },
        // 根据项目获取环境
        get_env(project_name){
            let data = {"project_name": project_name}
            post(get_env_by_project,data).then(response=>{
                this.env_list =  response.data
            })
        },
        // 创建bug点击事件
        btn_add_bug(){
            this.get_project()
            setTimeout(() =>{
                this.show_add_bug_modal = true
            },200); 
            
        },

        submit_add_bug(name){
            console.log(name)
            let data = {'bug':this.bug}
            post(bug_add,data).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('添加成功')
                    this.show_add_bug_modal = false
                    this.refresh()
                }else {
                    alert("添加失败:"+info)
                }
            })
        },
        changePage(index) {
            let _start = (index -1) * this.pageSize
            let _end = index * this.pageSize
            this.show_list = this.total_list.slice(_start,_end)
        },
        refresh() {
            this.get_project()
            post(bug_list).then( (response) => {
                show_simple_page(this,response)
            })
        }
    },
    mounted: function() {
        setTimeout(() =>{
            this.refresh();
        },200); 
    }
}
</script>
<style scoped>

</style>